<template>
  <div class="setUserRoles">
    <el-drawer title="我是标题" :visible.sync="drawerVisible" size="50%" :with-header="false" @close="cancelForm">
      <div class="drawerForm">
        <div class="pageTitle">
          <span class="titleBorder">|</span>
          <div class="titleText">设置角色</div>
          <slot name="header" />
          <el-divider />
        </div>
        <div class="roleBox">
          <el-form :model="formData" label-width="87px" label-position="right">
            <el-row :gutter="10" class="userInfo">
              <el-col :span="12">
                <el-form-item label="登录账号：">
                  <el-input v-model="formData.loginName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户名称：">
                  <el-input v-model="formData.userName" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="searchDiv">
            <el-input
              v-model="searchData.params.roleName"
              placeholder="请输入角色名称"
              class="searchInput"
              @keyup.enter.native="searchClick"
            />
            <el-button type="primary" class="topBtn" @click="searchClick">搜索</el-button>
          </div>
          <myTable
            ref="myTable"
            v-loading="loading"
            :row-key="'roleId'"
            style="height: calc(100% - 110px) !important"
            :table-label="tableLabel"
            :table-data="tableData"
            :table-total-size="tableTotalSize"
            :search-data="searchData"
            @getTableData="getTableData"
            @handleSelectionChange="handleSelectionChange"
          >
            <template #enable="slotProps">
              <el-tag v-if="slotProps.rowValue.enable === 1" type="primary">启用</el-tag>
              <el-tag v-else type="info">禁用</el-tag>
            </template>
          </myTable>
        </div>
        <div class="drawerFooter" align="right">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { loadRoleGrid, setUserRoles } from '@/api/system-management'
import myTable from '@/components/Table/index'
import { resetRouterMenu } from '@/router'
export default {
  name: 'SetUserRoles',
  components: {
    myTable
  },
  data() {
    return {
      drawerVisible: false,
      loading: false,
      formData: {},
      searchData: {
        sort: {},
        params: {
          roleName: ''
        }
      },
      tableData: [],
      tableLabel: [
        {
          type: 'selection',
          width: 55,
          show: true
        },
        {
          prop: 'roleName',
          label: '角色名称',
          width: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'roleCode',
          label: '角色编码',
          width: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'enable',
          label: '状态',
          type: 'scope',
          width: 100
        },
        {
          prop: 'remark',
          label: '备注',
          showOverflowTooltip: true
        }
      ],
      tableTotalSize: null,
      multipleSelection: [],
      selectRoleUserShow: false
    }
  },
  mounted() {},
  methods: {
    is(currentRow, roleIds) {
      this.formData = currentRow
      this.drawerVisible = true
      this.$nextTick(() => {
        this.$refs.myTable.toggleSelection(
          roleIds.map((item) => {
            return {
              roleId: item
            }
          })
        )
      })
    },
    // 取消表单
    cancelForm() {
      this.$refs.myTable.toggleSelection()
      this.$emit('closeForm')
      this.drawerVisible = false
    },
    // 获取tableData
    getTableData(cab) {
      this.loading = true
      loadRoleGrid(this.searchData).then((res) => {
        this.loading = false
        this.tableData = res.data
        this.tableTotalSize = res.total_count
        cab(res.data)
      })
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.$refs.myTable.getTableData()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    submitForm() {
      // 保存用户角色
      let roleIds = this.multipleSelection.map((item) => item.roleId)
      setUserRoles({
        userId: this.formData.userId,
        roleIds: roleIds
      }).then(() => {
        if (this.$store.state.user.id === this.formData.userId) {
          resetRouterMenu()
        }
        this.$notify.success('设置角色成功')
        this.cancelForm()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.setUserRoles {
  height: 100%;
  .drawerForm {
    display: flex;
    flex-direction: column;
    height: 100%;
    .roleBox {
      margin: 0 15px;
      height: calc(100% - 100px);
      .userInfo {
        border-bottom: 2px dashed #dcdfe6;
        margin-bottom: 15px;
      }
      .searchDiv {
        margin-bottom: 10px;
      }
    }
  }
  .drawerFooter {
    justify-content: right;
    padding: 20px;
  }
  .pageTitle {
    padding-top: 15px;
    padding-left: 15px;
    font-size: 20px;
    .titleBorder {
      font-weight: bold;
      font-size: 22px;
      color: #00a0e9;
      margin-right: 5px;
    }
    .titleText {
      display: inline;
      padding-right: 20px;
      padding-left: 5px;
    }
  }
}
</style>
